<template>
  <div
    class="max-w-screen-sm mx-auto h-full overflow-y-auto bg-slate-50"
    v-loading="shareLoading"
  >
    <div class="history">
      <div class="flex items-center relative overflow-hidden p-2 bg-slate-100">
        <div @click="update3" class="cursor-pointer">
          <LolAvartar :size="40" :iconId="recordData.iconId" />
        </div>

        <div class="ml-2 cursor-pointer" @click="update3">
          <div class="font-medium">
            <span class="text-base">{{ recordData.nameInfoNew }}</span>
            <span class="text-xs ml-2 text-gray-800"
              >V{{ recordData.level }}</span
            >
          </div>
          <div class="mt-1 text-xs">在线时间: {{ recordData.onlineInfo }}</div>
          <div
            class="message-detail text-xs"
            v-html="recordData.messageDetail"
          ></div>
        </div>

        <el-icon class="share" color="#409efc" :size="24" @click="handleShare">
          <Share />
        </el-icon>
      </div>

      <div
        class="p-2 m-2 shadow-md rounded-lg overflow-hidden"
        :class="{
          'bg-green-100': item.win === true,
          'bg-red-100': item.win === false
        }"
        v-for="(item, index) in recordData.list"
        :key="index"
        @click="handleOpenHistoryDetail(item)"
      >
        <div class="flex items-center cursor-pointer">
          <HeroAvatar
            :championId="item.championId"
            :size="40"
            :wasMvp="item.wasMvp"
            :wasSvp="item.wasSvp"
          />
          <div class="text-sm ml-2 flex-1">
            <div class="flex justify-between">
              <text
                >{{ item.win ? '胜利' : '失败' }}
                {{ `${item.kills}/${item.deaths}/${item.assists}` }}</text
              >
              <text>{{ parseTime(item.gameStartTimestamp) }}</text>
            </div>
            <div class="text-xs mt-1 flex justify-between">
              <div class="flex items-center">
                <text class="text-slate-500">{{
                  levelConfig.game_mod[item.queueId]
                }}</text>
                <i v-if="item.damageMax" class="ml-2 honor16 honor16-hurt2"></i>
                <i v-if="item.defenseMax" class="ml-2 honor16 honor16-hurt"></i>
                <i v-if="item.killsMax" class="ml-2 honor16 honor16-kill"></i>
                <i
                  v-if="item.assistsMax"
                  class="ml-2 honor16 honor16-attack"
                ></i>
                <i
                  v-if="item.pentaKills"
                  class="ml-2 honor16 honor16-kill5"
                ></i>
              </div>
              <text class="ml-2"
                >用时{{ secondsToHms(item.gameDuration) }}</text
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onActivated } from 'vue'
import LolAvartar from '@/components/LolAvartar.vue'
import { useRouter } from 'vue-router'
import { leagueSummoner, history_all } from '@/axios/api'
import { Share } from '@element-plus/icons-vue'
import { areaMap, levelConfig, platformMap } from '@/utils/area.js'
import { parseTime, secondsToHms, handlerso1Data } from '@/utils/auth.js'
import screenshot from '@/utils/screenshot'

const recordData = ref({})
const router = useRouter()
const shareLoading = ref(false)

function handleOpenHistoryDetail(item) {
  localStorage.setItem('userHistoryDetails', JSON.stringify(item))
  router.push('/historyDetails')
}

onActivated(() => {
  const userHistory = localStorage.getItem('userHistory')
    ? JSON.parse(localStorage.getItem('userHistory'))
    : {}
  recordData.value = userHistory
  console.log('礼包数据', userHistory)
  // getRankElo(userHistory)
})

// 接口3 列表更新
async function update3() {
  const userHistory = recordData.value
  try {
    shareLoading.value = true
    const area = platformMap[userHistory?.list?.[0]?.platformId]
    if (userHistory.areaId) {
      const res1 = await leagueSummoner({
        area: areaMap[userHistory.areaId]?.name,
        gameName: userHistory.label,
        tagLine: userHistory.tagLine
      })
      if (res1?.success === false) {
        ElMessage({
          message: res1?.error?.message,
          type: 'error'
        })
        return
      }
      const data = res1?.data
      const res2 = await history_all({
        area: areaMap[userHistory.areaId]?.name,
        puuid: data.puuid,
        beginIdx: 0,
        count: 100
      })
      console.log('返回返沪i', res1, res2)
      recordData.value = handlerso1Data({
        baseInfo: data,
        allrequestParams: [],
        list: res2?.data
      })
    } else if (area) {
      const res2 = await history_all({
        area,
        puuid: userHistory.puuid,
        beginIdx: 0,
        count: 100
      })
      recordData.value = handlerso1Data({
        baseInfo: {
          profileIconId: userHistory.iconId,
          level: userHistory.level,
          puuid: userHistory.puuid,
          privacy: userHistory.privacy,
          lastGameDate: userHistory.lastGameDate
        },
        allrequestParams: [],
        list: res2?.data
      })
    }
    localStorage.setItem('userHistory', JSON.stringify(recordData.value))
  } catch (error) {
    console.log('错误2', error)
  } finally {
    shareLoading.value = false
  }
}

function handleShare() {
  shareLoading.value = true
  screenshot('.history', '战绩列表').finally(() => (shareLoading.value = false))
}
</script>

<style lang="scss" scoped>
.message-detail {
  line-height: 24px;

  :deep(img) {
    width: 1rem !important;
  }
}
.isRefresh {
  animation: changDeg 1.5s linear 0s infinite;
}
@keyframes changDeg {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

.share {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 10;
}
</style>
